<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
			
		<title>Enlargement</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
		<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
		<link rel="stylesheet" href="css/custom.css" />
		<link rel="stylesheet" href="css/app.css" />
		<link rel="stylesheet" href="css/fonts.css" />
		
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	    <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/cordova-2.9.0.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/library.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/localize.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/jquery.runner-min.js"></script>
    	<script type="text/javascript" charset="utf-8">
		 	

    	
    		var parameter = "";
    		
    		$(document).on("pagebeforeshow", "#followup",function(event){
    	 		//alert(1);
    	 		//window.location.href="sendEmail.html?id=apartment";
    	 		document.addEventListener("deviceready", onDeviceReady, true); 
    	 	});
     		
    		function onDeviceReady() {
    			excecuteLocalization(["follow_up","global"]); 
		 		parameter = getParameter('method');
		 		//alert(parameter);
		 		$('#runner').runner();
		 		
		 		setTimeout(function(){
		 			
		 			var o = new Option($('#excercise_1').text(), "1");
			 		$(o).html($('#excercise_1').text());
			 		$("#excercisesSelect").append(o);
			 		var a = new Option($('#excercise_2').text(), "2");
			 		$(a).html($('#excercise_2').text());
			 		$("#excercisesSelect").append(a);
		 			
			 		if(parameter){
			 			$("#excercisesSelect").val(parameter);
			 			$('#excercisesSelect').selectmenu('refresh');			 		
			 		} 
			 		else{
			 			$("#excercisesSelect").val("");
			 			$('#excercisesSelect').selectmenu('refresh');	
			 		}
			 		
			 		var current_length = window.localStorage.getItem("current_length");
			 		$("#current_length").val(current_length);
			 		
		 		}, 1000);
		 		
		 		db = openDatabase(shortName, version, displayName,maxSize);
		 		db.transaction(populateDB, errorCB);
    	    }
		 	
		 	/***********************************************************************/
		 	
		   	function populateDB(tx) {
		    	//tx.executeSql('drop table excercises',[],nullHandler,errorCB);
		        tx.executeSql('CREATE TABLE IF NOT EXISTS excercises (id INTEGER PRIMARY KEY AUTOINCREMENT, excercise TEXT NOT NULL, datetime TEXT NOT NULL, timer TEXT NOT NULL, length TEXT)',[],nullHandler,errorCB);		    
		    }
		 
		    function errorCB(transaction, error) {
		    	   alert('Error: ' + error.message + ' code: ' + error.code);
		    }
		    
		    function nullHandler(){};
		    
		    
		    /***********************************************************************/
		 	
		 	function chronoStart(){
		    	if($("#excercisesSelect  option:selected").val()==""){
		 			alert($("#select_exerciseTag").html());
		 			return;
		 		} else{		    	
			 		$('#runner').runner('start');
			 		$("#startDiv").hide();
			 		$("#pauseDiv").show();
			 		$("#resetDiv").hide();
			 		$("#saveDiv").hide();
		 		}
		 	}
		 	
		 	function chronoContinue(){
		 		$("#startDiv").hide();
		 		$("#pauseDiv").show();
		 		$('#runner').runner('start');
		 		$("#saveDiv").hide();
		 	}
		 	
		 	function chronoReset(){
		 		$("#startDiv").show();
		 		$("#resetDiv").hide();
		 		$('#runner').runner('reset');
		 		$("#saveDiv").hide();
		 	}
		 	
		 	function chronoPause(){
		 		$("#resetDiv").show();
		 		$("#pauseDiv").hide();
		 		$("#startDiv").show();
		 		$('#runner').runner('stop');
		 		$("#saveDiv").show();
		 	}
		 	
		 	function saveExcercise(){

		 		var currentLength = $("#current_length").val();
		 		var exercise = $("#excercisesSelect  option:selected").val();
		 		var timer = $('#runner').runner('info').time;
		 		
		 		//alert("currentLength: " + currentLength);
		 		//alert("exercise: " + exercise);
		 		//alert("timer: " + timer);
		 		
		 		if(exercise==""){
		 			alert($("#select_exerciseTag").html());
		 			return;
		 		}
		 		
		 		if(currentLength==""){
		 			alert($("#insert_lengthTag").html());
		 			return;
		 		}
		 		
		 		var datetime = new Date();
		 		var strDate = datetime.getFullYear() + "/" + datetime.getMonth() + "/" + datetime.getDate() + " " + datetime.getHours() + ":" + datetime.getMinutes() + ":" + datetime.getSeconds();
		 		
		 		//alert(strDate);
		 		chronoReset();
		 		$("#pauseDiv").hide();

		 		
		 		db.transaction(function(tx){
		        	 tx.executeSql('INSERT INTO excercises (excercise, datetime, timer, length) values ("' + exercise + '", "' + strDate + '", "' + timer + '", "' + currentLength + '")',[],function(){
				        	alert($("#data_savedTag").html());
				        	window.localStorage.setItem("current_length", currentLength);
				        },errorCB);
		        }, errorCB);
		 		
		 	}
		 	
		 	function showData(){
		 		db.transaction(function(tx){
		 			tx.executeSql('SELECT * FROM excercises',[],function(tx,result){
			        	var dataset = result.rows;
		 				alert(dataset.length);
			        	for (var i = 0, item = null; i < dataset.length; i++) {
			                item = dataset.item(i);
			                alert("excercise: " + item['excercise'] + ", datetime: " + item['datetime'] + ", timer: " + item['timer'] + ", length: " + item['length']);
			            }
			        },errorCB);
		 		},errorCB);
		 	}
	 					
		</script>
		<style>
			.nav-search .ui-btn-up-a {
				background-image:none;
				background-color:#333333;
			}
			.nav-search .ui-btn-inner {
				border-top: 1px solid #888;
				border-color: rgba(255, 255, 255, .1);
			}
		</style>
	</head>
<body style="text-align:center;">

<div  data-role="page" style="display:none;" id="followup"> 
	
	<div data-role="panel" data-position="right" data-position-fixed="false" data-display="overlay" id="menu-panel" data-theme="a">

		<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
			<li data-icon="delete" style="background-color:#111;">
				<a href="#header" data-rel="close"><span data-translate="localize">global.close_menu</span></a>
			</li>
			<li>
				<a href="javascript:backToHome();"><span data-translate="localize">global.go_home</span></a>
			</li>
			<li>
				<a href="javascript:window.location.href='settings.html'"><span data-translate="localize">global.settings</span></a>
			</li>
			<li>
				<a href="javascript:exitAPP();"><span data-translate="localize">global.exit</span></a>
			</li>
		</ul>
		<span data-translate="localize" id="confirm_msgTag" style="display:none;">global.confirm_msg</span>
	</div><!-- /panel -->

	<div  data-role="header" id="header"  data-position="fixed">
		<img border="0" src="images/img-logo.jpg" alt="Logo" height="35" width="35" style="float:left; display:inline"/>
		<a href="javascript:openMenu();" data-icon="gear" class="ui-btn-right" id="openMenuButton"><span data-translate="localize">global.menu</span></a>
	</div> 
	
	<div  data-role="content">
		<table style="width: 100%">
			<tr><td></td></tr>
			<tr>
				<td>
					<span data-translate="localize">follow_up</span><br><br>
				</td>
			</tr>
			<tr>
				<td>
					<label for="excercisesSelect" class="select"><span data-translate="localize">select_excercise</span></label>
					<select name=excercisesSelect id="excercisesSelect"></select>
					<br>
					<label for="current_length" class="select"><span data-translate="localize">current_length</span></label>
					<input type='text' name='current_length' id='current_length' style='text-align:center;'>
					<span data-translate="localize" id="excercise_1" style="display:none;">excercise_1</span>
					<span data-translate="localize" id="excercise_2" style="display:none;">excercise_2</span>
				</td>
			</tr>
			<tr>
				<td>
					<span id="runner"></span>
				</td>
			</tr>
			<tr>
				<td>
					<div id='startDiv'><button class="normal" id="start" name="start" onclick="chronoStart()" data-theme="f"><span data-translate="localize">start</span></button></div>
					<div id='pauseDiv' style='display:none;'><button class="normal" id="pause" name="pause" onclick="chronoPause()" data-theme="f"><span data-translate="localize">pause</span></button></div>
					<div id='resetDiv' style='display:none;'><button class="normal" id="reset" name="reset" onclick="chronoReset()" data-theme="f"><span data-translate="localize">reset</span></button></div>
					<div id='saveDiv' style='display:none;'><button class="normal" id="save" name="reset" onclick="saveExcercise()" data-theme="f"><span data-translate="localize">save_excercise</span></button></div>
					<div id='saveDiv' style='display:block;'><button class="normal" id="save" name="reset" onclick="window.location.href='summary.html'" data-theme="f"><span data-translate="localize">show_data</span></button></div>
				</td>
			</tr>
		</table>
	</div> 
	<span data-translate="localize" id="select_exerciseTag" style="display:none;">select_exercise</span>
	<span data-translate="localize" id="insert_lengthTag" style="display:none;">insert_length</span>
	<span data-translate="localize" id="start_chronoTag" style="display:none;">start_chrono</span>
	<span data-translate="localize" id="data_savedTag" style="display:none;">global.saved_msg</span>
	<!-- 
	<div  data-role="footer" data-position="fixed">
		<button class="button-main-small" onclick="exitAPP();"><span data-translate="localize">global.exit</span></button>
	</div>
	-->
</div>
</body>
</html>